@import "../../../../css/common-var";
.comment-box {
  width: 100%;
  position: relative;
  overflow: hidden;

  .u-editor {
    transition: all 0.3s;
    border: 1px solid @comment-reply-editor-background;
    background: @comment-reply-editor-background;
    border-radius: 4px;
    font-size: 14px;

    .rich-input {
      min-height: 70px;
      max-height: 80px;
      overflow-y: auto;
      line-height: 22px;
      padding: 4px 10px;
      outline: none;
      width: 100%;
      box-sizing: border-box;
      // 是否可以手动改变大小
      background-position: 120% -10px;
      transition: background 0.3s;
      letter-spacing: .03em;
      .mentionUser {
        background-color: red;
      }
    }

    .rich-input:empty::before {
      cursor: text;
      content: attr(placeholder);
      color: #8A8F8D;
    }
    .image-preview-box {
      display: flex;
      padding: 0 12px 5px 12px;
      .image-preview {
        position: relative;
        img {
          max-height: 72px;
          max-width: 72px;
        }
        .clean-btn {
          position: absolute;
          top: -4px;
          right: 0;
          cursor: pointer;
          .iconfont {
            color: #8A8F8D;
          }
        }
        .clean-btn:hover {
          color: #FAFAFA;
        }
      }
    }
  }
  .active {
    border-color: #00B96B;
  }

  .action-box {
    display: flex;
    align-items: center;
    margin-top: 10px;
    //color: @grey-white-font-color;

    .emoji-content, .picture-content {
      cursor: pointer;
      .iconfont {
        margin-right: 4px;
      }

      span:last-child {
        font-size: 15px;
      }
    }

    .action-emoji {
      margin-right: 16px;
    }


    .btn-box {
      margin-left: auto;

      button {
        height: 28px;
        padding: 0 10px;
      }

      button:first-child {
        margin-right: 10px;
      }

      .ivu-btn-text {
        color: var(--title-color);
        &:hover {
          background: unset;
          color: @primary-color;
        }
      }
    }

    .picture {
      font-size: 14px;
      color: var(--u-text-color-secondary);
      cursor: pointer;

      .icon {
        fill: var(--u-text-color-secondary);
        margin-right: 4px;
        margin-bottom: 1px;
      }

      #comment-upload {
        display: none;
      }
    }
  }



  .picture:hover {
    color: var(--u-color-primary);

    .icon {
      fill: var(--u-color-primary);
    }
  }

}
